<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>nav</title>
    <!--    <link rel="stylesheet" href="/static/css/bulma.min.css" th:href="@{/css/bulma.min.css}">
        <link rel="stylesheet" href="/static/css/community.css" th:href="@{/css/community.css}">
        <link rel="stylesheet" href="/static/css/hot.css" th:href="@{/css/hot.css}">
        <link rel="stylesheet" href="/static/css/notice.css" th:href="@{/css/notice.css}">
        <script type="text/javascript" src="/static/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}"></script>
        <script type="text/javascript" src="/static/js/awesome.js" th:src="@{/js/awesome.js}"></script>
        <script type="text/javascript" src="/static/js/community.js" th:src="@{/js/community.js}"></script>-->
</head>
<body>
<!-- 导航栏内容 -->
<nav th:fragment="nav(current,size,keyword)" class="navbar  nav-height is-fixed-top" role="navigation"
     aria-label="main navigation">
    <div class="navbar-brand">
        <span class="navbar-item">
                <a href="/">
                     <strong class="nav-left-title">COMMUNITY</strong>
                </a>
         </span>
        <a class="navbar-burger " role="button" data-target="navMenu" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>


    <div id="navMenu" class="navbar-menu">
        <div class="navbar-start">
            <span class="navbar-item">
                <a href="/" th:href="@{/}" class=" button is-dark is-outlined is-rounded is-fullwidth">
                     <strong>首页</strong>
                </a>
            </span>
            <span class="navbar-item">
                 <input id="current-btn" type="hidden" name="current" th:value="${current}">
                 <input id="size-btn" type="hidden" name="size" th:value="${size}">
                 <span class="control has-icons-right">
                      <input id="search-btn" class="input " type="text" autocomplete="off" th:value="${keyword}"
                             placeholder="搜索..."/>
                      <span id="search-icon" class="icon is-right hand-cursor ">
                         <i class="fa-solid fa-magnifying-glass"></i><!--TODO 悬浮手指问题-->
                      </span>
                 </span>
            </span>
        </div>

        <div class="navbar-end">
            <div class="navbar-item ">
                <div class="buttons" th:if="${session.user==null}">
                    <a href="./login.html" th:href="@{/login.html}"
                       class="button is-dark is-outlined is-rounded is-fullwidth">
                        登录
                    </a>
                </div>
            </div>
            <span class="navbar-item has-dropdown is-right is-hoverable">
                         <a class="navbar-link field is-grouped" id="nav-link"
                            th:if="${session!=null&&session.user!=null}">
                             <span>[[${session.user.username}]]</span>
                             <figure class="image is-32x32">
                                  <img class="is-rounded" th:src="${session.user.avatarUrl}" src="/static/img/000.jpg"/>
                             </figure>
                        </a>

                        <div id="nav-dropdown-item" class="navbar-dropdown is-boxed">
                            <a th:href="@{/notice/list}" class="navbar-item" id="user-notice">
                                通知
                                <div class="status-icon">
                                    <span id="user-notice-unread" class="count">2</span>
                                </div>
                            </a>
                            <a th:href="@{/article/list}" class="navbar-item">
                                我的帖子
                            </a>
                            <a class="navbar-item" th:href="@{/article/add-article}">
                                发布文章
                            </a>
                            <hr class="navbar-divider">
                            <a th:href="@{/logout}" class="navbar-item">
                                登出
                            </a>
                        </div>
                    </span>

        </div>
    </div>
    <script type="application/javascript" th:inline="javascript">
        $(document).ready(function () {
            let sessionUser = [[${session.user}]]
            if (sessionUser !== null) {
                noticeCount();
                const ws = new WebSocket(`/ws/notice/${sessionUser.id}`);

                ws.onopen = () => {
                    console.log('链接已建立...');
                };

                ws.onmessage = (event) => {
                    console.log("收到数据:" + event.data)
                    let $userNotice = $("#user-notice");
                    let $unreadNotice = $("#user-notice-unread");
                    if(!$userNotice.find('.status-icon').length > 0){
                        $userNotice.empty().append(`
                        通知
                        <div class="status-icon">
                            <span id="user-notice-unread" class="count">1</span>
                        </div>
                        `)
                    }else {
                        $unreadNotice.text(parseInt($unreadNotice.text(), 10)+1);
                    }
                    // ws.send(message);
                };
            }
        });
    </script>
</nav>

</body>
</html>